<template>
    <div class="home">
        <el-row :gutter="70" type="flex" justify="center">
            <el-col :span="9" class="left">
                <h2>Version 2024</h2>
                <div class="desc">
                    <p>轻松工作&nbsp;&nbsp;高效办公</p>
                    <p>云上部署&nbsp;&nbsp;数字时代</p>
                </div>
                <div class="bottom">
                    <div class="remark-container">
                        <div class="ball blue">1</div>
                        <div class="remark">先进的技术</div>
                    </div>
                    <div class="remark-container">
                        <div class="ball red">2</div>
                        <div class="remark">高效的服务</div>
                    </div>
                    <div class="remark-container">
                        <div class="ball green">3</div>
                        <div class="remark">安全的系统</div>
                    </div>
                </div>
            </el-col>
            <el-col :span="11" class="right">
                <img src="../../assets/banner.png" class="banner" />
            </el-col>

        </el-row>
    </div>
</template>

<script>
</script>

<style lang="less">
.home {
    display: flex;
    justify-content: center;
    padding-top: 50px;
    padding-bottom: 50px;
    .left {
        h2 {
            font-size: 34px;
            color: #2f5664;
            font-weight: bold;
            letter-spacing: 1px;
            margin-top: 15px;
        }
        .desc {
            border-left: solid 5px #a6acad;
            padding-left: 15px;
            p {
                font-size: 24px;
                font-weight: bold;
                color: #a6acad;
                letter-spacing: 1px;
            }
        }
        .bottom {
            display: flex;
            justify-content: space-between;
            margin-top: 40px;
            .remark-container {
                .ball {
                    width: 80px;
                    height: 80px;
                    border-radius: 40px;
                    line-height: 80px;
                    background-color: #666;
                    font-size: 24px;
                    text-align: center;
                    color: #fff;
                    font-weight: bold;
                }
                .blue {
                    background-color: #26a6ff;
                }
                .red {
                    background-color: #fe3950;
                }
                .green {
                    background-color: #5ce055;
                }
                .remark {
                    width: 100%;
                    text-align: center;
                    font-size: 16px;
                    margin-top: 20px;
                    color: #555;
                }
            }
        }
    }
    .right {
        .banner {
            width: 85%;
            height: auto;
        }
    }
}
</style>
